<template>
   <div id="moreList">
        <!--后退-->
        <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <div id="activity" >
            <div class="title">
                <p>{{genre(Number(this.$route.params.type))}}</p>
            </div>
            <div class="shops" >
                <div class="welfareInfo" :style="'background-size:100% 100%;background-image:url('+item.cover+')'" v-for="item in WelfareDelData">
                    <div>
                        <div class="userCard" >
                            <p class="del"><router-link :to="{path:'/myWelfareFormat/'+item.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                            <section>
                                <p>{{item.welfareExchangeModel.welfareName}}</p>
                                <p>{{item.welfareExchangeModel.welfareDetailed}}</p>
                            </section>
                        </div>
                        <section class="integral">
                                <p>100积分</p>
                                <p>剩余10份</p>
                        </section>
                    </div>
                </div>
            </div>
        </div>
   </div>
</template>
<script>
import genre from '../../../server/welfareType.js'
export default {
  data () {
    return {
        genre:genre,
        //限时好货
        form:{
            type:Number(this.$route.params.type),
            pageSize:999,
            pageNumber:1,
            flag:1
        },
        WelfareDelData:[],
    }
  },
  mounted(){
      console.log(Number(this.$route.params.type))
  },
  created(){
    this.getWelfareDelData(this.form);
  },
  methods:{
    getWelfareDelData(val){
        this.$api.myWelfareInfo(this.form).then(res=>{
            if(res.code=='000000'){
                this.WelfareDelData = res.data.list;
                this.WelfareDelData.forEach((item)=>{
                   if(item.welfareExchangeModel.welfareName.length>5){
                        item.welfareExchangeModel.welfareName=item.welfareExchangeModel.welfareName.substring(0,5) + "..."
                    }
                    if(item.welfareExchangeModel.welfareDetailed.length>10){
                        item.welfareExchangeModel.welfareDetailed=item.welfareExchangeModel.welfareDetailed.substring(0,10) + "..."
                    }
                })
            }
        });
    },
  }
}    
</script>
<style>
#moreList{
    height:100%;
    width:100%;
}
#moreList .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 0.6rem 1rem 1rem;
}
#moreList #activity .title{
    line-height:1.25rem;
    margin:0rem 0.5rem;
    padding:0rem 1rem;
    display:flex;
    justify-content:space-between;
}
#moreList #activity .title > p{
    font-size:0.8rem;
    color:#24a188;
}
#moreList #activity .shops{
    padding:0 1rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#moreList #activity .shops .welfareInfo{
    height:6.5rem;
    border-radius:8px;
    width:48%;
    color:#fff;
    margin-top:0.75rem;
    box-shadow:0.05rem 0.05rem 0.05rem 0.05rem #888888;
}
#moreList #activity .shops .welfareInfo > div{
    height:6.5rem;
    border-radius:8px;
    padding:0.8rem 0.5rem;
    background:rgba(0,0,0,0.5)
}
#moreList #activity .shops .userCard > .del{
    float:right;
    background:#2a9e94;
    border-radius:8px;
    font-size:0.8rem;
    height:1.25rem;
    line-height:1.25rem;
    text-align:center;
    width:2.75rem;
}
#moreList #activity .shops .userCard > .del::after{
    position: relative;
    top:0.1rem;
    left:0.25rem;
    content:url(../../../assets/welfare/back.png)
}
#moreList #activity .shops .userCard > section{
    clear:both;
    position: relative;
    top:-0.5rem;
    left:0.25rem;
    font-size:0.7rem;
    
}
#moreList #activity .shops .integral{
    height:1.5rem;
    line-height:1.5rem;
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
</style>